<template>
	<view class="start-box">
		<view>
			<view class="logo">
				<image src="/static/icon/logo.svg" mode=""></image>
				<text>TIES</text>
			</view>
			<view class="start-img">
				<image src="/static/image/start-img3.svg" mode=""></image>
			</view>
			<view class="start-text1">
				{{ t("start.startTitle2") }}
			</view>
			<view class="start-text2 syl">
				{{ t("start.startDesc2") }}
			</view>
			<view class="start-tabs">
				<view class="tabs-border"></view>
				<view class="tabs-radius"></view>
			</view>
		</view>
		<view>
			<view class="start-btn" @click="nextClick">{{ t("common.zc") }}</view>
			<view class="start-btn2" @click="login">{{ t("common.dl") }}</view>
		</view>
	</view>
</template>

<script setup>
import { defineEmits, defineProps } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let emit = defineEmits(["nextBtn"]);
let props = defineProps({
	status: {
		type: Number,
		default: 2,
	},
});

const nextClick = () => {
	emit("nextBtn", 3);
	uni.setStorageSync("startNum", 3);
	uni.navigateTo({
				url: "/pages/account/register"
			})
};
const login = () => {
	uni.navigateTo({
		url: "/pages/account/login",
	})
};
</script>

<style lang="scss">
.start-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.logo{
		margin: 88.71rpx 43.72rpx 46.51rpx;
		display: flex;
		align-items: center;
		image{
			width: 87.21rpx;
			height: 61.89rpx;
			margin-right: 14rpx;
		}
		text {
			background-image: linear-gradient(90deg, rgba(11, 187, 160, 1) 0%, rgba(8, 166, 179, 1) 50%, rgba(2, 121, 219, 1) 100%);
			/** 文本1 */
			font-size: 52.33rpx;
			font-weight: 700;
		    -webkit-background-clip: text; /* 裁剪背景到文字 */
		    color: transparent; /* 文字颜色设置为透明，以便显示背景颜色 */
		}
	}
	.start-img {
		margin: 0 auto 52px;

		image {
			width: 708.14rpx;
			height: 533.72rpx;
		}
	}

	.start-text1 {
		font-size: 48.84rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 26px;
	}

	.start-text2 {
		font-size: 24.42rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
	}

	.start-tabs {
		margin: 27px auto;
		display: flex;
		align-content: center;
		justify-content: center;

		.tabs-radius {
			width: 10px;
			height: 10px;
			background: rgba(151, 195, 252, 1);
			border-radius: 50%;
			margin-left: 4px;
		}

		.tabs-border {
			width: 27px;
			height: 10px;
			background: rgba(2, 120, 220, 1);
			border-radius: 5px;
		}
	}

	.start-btn {
		width: 570.35rpx;
		height: 97.67rpx;
		border-radius: 26.16rpx;
		background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 34.03%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
		font-size: 31.4rpx;
		line-height: 97.67rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin: 0 auto 28rpx;
	}
	.start-btn2 {
		width: 570.35rpx;
		height: 97.67rpx;
		border-radius: 26.16rpx;
		background: rgba(239, 246, 255, 1);
		font-size: 31.4rpx;
		line-height: 97.67rpx;
		color: rgba(2, 120, 220, 1);
		text-align: center;
		margin: 0 auto 68rpx;
	}
}
</style>
